import 'package:flutter/material.dart';
import 'package:amap_plugin/index.dart';

class MapView extends StatefulWidget {
  @override
  _MapViewState createState() => _MapViewState();
}

class _MapViewState extends State<MapView> {
  AMapViewController _controller = null;
  int zoomLevel = 3;
  LatLng latLng;
  LatLng location;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          actions: <Widget>[
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.menu),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.my_location),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.location_on),
            ),
            IconButton(icon: Icon(Icons.pin_drop),onPressed: (){
              this._controller.addMarkerPin(
                bitmapDescriptor: BitmapDescriptor("images/purple_pin.png")
              );
            },),
            IconButton(
              onPressed: () {
                 this._controller.addMarker(MarkerOptions(
                   position: latLng,
                   icon: BitmapDescriptor("images/p.jpeg")
                 ));
              },
              icon: Icon(Icons.add_location),
            ),
            SizedBox(
              width: 10,
            ),
          ],
        ),
        body: Stack(
          children: <Widget>[
            AMapView(
              onAMapViewCreatedCallback: (controller) {
                this._controller = controller;
              },
              onMapClick: (latLng) {
                this.latLng = latLng;
                setState(() {});
              },
              onLocationChanged: (latLng) {
                this.location = latLng;
                setState(() {});
              },
              mapViewOptions: MapViewOptions(
                  zoomControlsEnabled: false, zoomGesturesEnabled: true),
            ),
            Positioned(
              bottom: 10,
              left: 0,
              right: 0,
              child: Center(
                  child: Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                    color: Colors.redAccent,
                    borderRadius: BorderRadius.circular(40)),
                child: Center(child: Text("hello")),
              )),
            ),
            Positioned(
              bottom: 10,
              right: 5,
              child: InkWell(
                onTap: () {
                 
                },
                child: Center(
                    child: Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                      color: Colors.redAccent,
                      borderRadius: BorderRadius.circular(40)),
                  child: Center(child: Icon(Icons.add)),
                )),
              ),
            ),
            Positioned(
              bottom: 10,
              right: 5,
              child: InkWell(
                onTap: () {
                },
                child: Center(
                    child: Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                      color: Colors.redAccent,
                      borderRadius: BorderRadius.circular(40)),
                  child: Center(child: Icon(Icons.add)),
                )),
              ),
            ),
            Positioned(
              top: 60,
              left: 0,
              child: Center(
                  child: Container(
                      width: 200,
                      height: 200,
                      decoration:
                          BoxDecoration(color: Colors.white.withOpacity(0.5)),
                      child: SingleChildScrollView(
                        child: Column(
                          children: <Widget>[
                            Text('地图点击事件'),
                            Text('lat:${latLng?.latitude}'),
                            Text('lng:${latLng?.longitude}'),
                            Divider(),
                            Text('位置变更事件'),
                            Text('lat:${location?.latitude}'),
                            Text('lng:${location?.longitude}'),
                            Divider()
                          ],
                        ),
                      ))),
            ),
          ],
        ));
  }
}
